<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>添加栏目</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            display: flex;
            list-style: none;
            margin:14rem 18rem 0 18rem;
        }
        ul>li{
            margin-right: 29.5rem;
            font-size: 14rem;
            font-weight: bold;
            color: #9999;
        }
        .active{
            color: #000000;
        }
        .active:after{
            content:'';
            display:block;
            width:14rem;
            border-bottom:2px solid #000;
            margin: 3rem auto;
        }
        .tab-list{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .tab-content{
            width: 160rem;
            height: 59rem;
            background: rgb(246, 246, 246);
            margin-top: 8.5rem;
            margin-left: 8.75rem;
            margin-right: 8.75rem;
            display: flex;
            position: relative;
        }
        .header{
            width: 26.5rem;
            height: 26.5rem;
            margin-left: 10.5rem;
            margin-top: 14rem;
            border-radius: 50%;
        }
        .tab-list-name{
            margin-top: 10rem;
            font-size: 12rem;
            font-weight: bold;
        }
        .tab-list-title{
            margin-top: 12rem;
            font-size: 9rem;
            color: #787878;
        }
        .add{
            width: 10rem;
            height: 10rem;
            margin-top: 21.5rem;
            margin-right: 11rem;
            position: absolute;
            right: 0;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    <div id="app">
        <ul id="tab-tilte">
            <li :class="{active:index==ishow}" v-for="(item,index) in list" @click="getItems(index,item.id)">{{item.name}}<span class="head-line"></span></li>
        </ul>
        <div class="tab-list">
            <!-- <div class="tab-content">
                <img class="header" src="../images/头像.png">
                <div style="margin-left: 14rem;">
                    <div class="tab-list-name">百度</div>
                    <div class="tab-list-title">百度一道</div>
                </div>
                <img class="add" src="../images/加.png">
            </div>
            <div class="tab-content">1</div>
            <div class="tab-content">1</div>
            <div class="tab-content">1</div> -->
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- <script type="text/javascript">
    $(document).ready(function(){
        $('#tab-tilte li').click(function(){
           var cur=$(this).index(); //获取当前点击tab标题的索引值
            tabFun(cur);//调用方法
        });
    });
    function  tabFun(cur){
        $('#tab-tilte li').eq(cur).addClass('active').siblings().removeClass('active');
    }
</script> -->
<script>
    new Vue({
            el: '#app',
            data() {
                return  {
                    ishow:0,
                    list:[],
                    items:[]
                }
                
            },
            mounted(){
                var that = this
                $.ajax({
                    //请求方式
                    type : "GET",
                    //请求的媒体类型
                    contentType: "application/json;charset=UTF-8",
                    //请求地址
                    url : "http://app.aebrowser.cn/api/v1.cast/getCate",
                    dataType:'jsonp',
                    //数据，json字符串
                    data:{
                        token:'c6e57bd8-b6b7-4dfa-be6b-ea9e03b914c5'
                    },
                    //请求成功
                    success : function(res) {
                        if(res.code==1){
                            that.list = res.data
                            console.log(res.data)
                            that.getItems(0,res.data[0].id)
                        }
                    }
                });
            },
            methods:{
                getItems(index,id){
                    var that = this
                    $.ajax({
                        //请求方式
                        type : "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url : "http://app.aebrowser.cn/api/v1.cast/getItems",
                        dataType:'jsonp',
                        //数据，json字符串
                        data:{
                            token:'c6e57bd8-b6b7-4dfa-be6b-ea9e03b914c5',
                            cate_id:id
                        },
                        //请求成功
                        success : function(res) {
                            if(res.code==1){
                                that.items = res.data.data
                                that.ishow=index
                            }
                        }
                    });
                }
            }
        })
    </script>
</html>